<template>
<l-layout class="l-tab-page" v-if="!lr_loadPage" >
    <template #left>
        <l-panel style="padding-right:0;" >
            <template #title>
                {{$t('签章分类')}}
                <div class="tree-setting-btn" >
                    <el-tooltip effect="dark" :content="$t('分类管理')" placement="top">
                        <el-button @click="handleSettingClick" type="text" icon="el-icon-setting"></el-button>
                    </el-tooltip>
                </div>
            </template>
            <el-tree class="learun-tree"  ref="tree" node-key="id" :highlight-current="true"  :data="treeData"   @node-click="handleNodeClick">
                <span class="lr-tree-node"  slot-scope="{ node }">
                    <i class="el-icon-notebook-2"></i>
                    {{ node.label }}
                </span>
            </el-tree>
        </l-panel>
    </template>
    <l-panel style="padding-left:0;" >
        <template #toolLeft >
            <div class="l-panel--item" >
                <el-input :placeholder="$t('请输入模版名称')" v-model="searchWord"  @keyup.enter.native="hanleSearch" size="mini" >
                    <el-button @click.native="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </template>
        <template #toolRight >
            <l-tool-btns @click="handleAdd()" >
                <l-excel-btns></l-excel-btns>
            </l-tool-btns>
        </template>
        <l-table 
            :loading="tableLoading"
            :columns="columns" 
            :dataSource="tableData" 
            row-key="f_Id"
            :isPage="true"
            :pageTotal="tableTotal"
            :tablePage.sync="tableCurrentPage"

            @loadPageData="turnTablePage"
            :pageSizes="[50, 100, 200]"
            >
            <template v-slot:f_ImgFile="scope" >
                <el-image
                    style="width: 100px;margin-top: 8px;"
                    :src="`${apiUrl}system/annexesfile/${scope.row.f_ImgFile}?token=${token}`"
                    fit="contain" :preview-src-list="[`${apiUrl}system/annexesfile/${scope.row.f_ImgFile}?token=${token}`]" lazy>
                    <div slot="placeholder" class="image-slot">
                        {{$t('加载中')}}<span class="dot">...</span>
                    </div>
                </el-image>
            </template>
            <template v-slot:f_EnabledMark="scope" >
                <el-switch
                    :active-value="1"
                    :inactive-value="0"
                    v-model="scope.row.f_EnabledMark"
                    @change="handleEnableChange(scope.row)"
                    >
                </el-switch>
            </template>
            
            <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
        </l-table>
    </l-panel>
    <l-drawer 
        :title="$t('分类管理')"
        :visible.sync="classifysVisible"
        :showOk="false"
        :showClose="false"
        size="800px"
        >
        <l-dataitem-index classifyCode="StampType"></l-dataitem-index>
    </l-drawer>

    <l-dialog :title="$t(formTitle)"
                :visible.sync="formVisible"
                :height="472"
                :width="600"
                @ok="handleSave"
                @close="handleCloseForm"
                @opened="handleOpenedForm">
        <my-form ref="form" ></my-form>
    </l-dialog>
</l-layout>
</template>

<script>
const api = window.$api.workflow.stamp
import MyForm from './form'
export default {
  components: {
    MyForm
  },
  data () {
    return {
        lr_isPage:true,
        // 左侧树形
        classifysVisible:false,
        treeCategory:'',

        // 搜索
        searchWord:'',


        // 表格
        columns: [
            {label:'名称',prop:'f_StampName',width:'150'},
            {label:'分类',prop:'f_StampType',width:'120',align:'center',dataType:'dataItem',dataCode:'StampType'},
            {label:'状态',prop:'f_EnabledMark',width:'64',align:'center'},
            {label:'签章',prop:'f_ImgFile',width:'124',align:'center',isNotAutoWrap:false},
            {label:'属于人',prop:'f_UserIds',minWidth:'100',dataType:'user'}
        ],
        tableBtns:[
            {prop:'Edit',label:'编辑',width:40},
            {prop:'Delete',label:'删除',width:40}
        ],
        tableLoading:false,
        tableTotal:0,
        tablePageSize:50,
        tableCurrentPage:1,
        tableData: [],

        // 表单参数
        formVisible:false,
        formTitle:'',
        formEditRow:null,
        formEdit:false
    };
  },
  computed:{
      treeData(){
          return this.lr_dataItemTree(this.lr_dataItem['StampType'])
      }
  },
  mounted () {
        this.lr_loadDataItem('StampType')
        this.loadTablePage()
  },
  methods:{
    loadTablePage(isNotFirst){
        if(!isNotFirst){
            this.tableCurrentPage = 1;
        }
        this.tableLoading = true;
        let queryData = {
            rows:this.tablePageSize,
            page:this.tableCurrentPage,
            sidx:'F_CreateDate DESC',
            f_StampName:this.searchWord,
            f_StampType:this.treeCategory
        }
        api.getPage(queryData).then(res=>{
            const data = this.$deepClone(res.data.data)
            this.tableData = data.rows
            this.tableTotal = data.records
            this.tableLoading = false
        }).catch(()=>{
            this.tableData = []
            this.tableLoading = false
        })
    },
    turnTablePage({rows}){
        this.tablePageSize = rows
        this.loadTablePage(true)
    },
    
    // 搜索
    hanleSearch(){
        this.loadTablePage()
    },

    // 分类
    handleNodeClick(node) {
        this.treeCategory = node.value
        this.tableCurrentPage = 1
        this.loadTablePage()
    },
    handleSettingClick(){
        this.classifysVisible = true
    },

    // 表单
    handleAdd(){
        this.formEdit = false
        this.handleShowForm('新增签章')
    },
    handleEdit($index,row){
        this.formEdit = true
        this.formEditRow = row
        this.handleShowForm('编辑签章')
    },
    handleDelete($index,row){
        this.$confirm(this.$t('此操作将永久删除该数据, 是否继续?'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
        }).then(async () => {
            this.tableData.splice($index,1);
            this.tableTotal--;
            await api.remove(row.f_StampId)
            this.$message({
                type: 'success',
                message: this.$t('删除成功!')
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: this.$t('已取消删除!')
            })
        })
    },
    handleEnableChange(row){
        api.updateState(row.f_StampId,row.f_EnabledMark).then(()=> {
            this.$message({
                type: 'success',
                message: '更新成功!'
            });
        })
    },
    async handleSave(showLoading, hideLoading) {
        if (await this.$refs.form.validateForm()) {
            showLoading()
            const postData = this.$refs.form.getForm()
            let res = ''
            if(this.formEdit){// 编辑
                res = await this.$awaitWraper(api.update(this.formEditRow.f_StampId,postData))
            }
            else{// 新增
                res = await this.$awaitWraper(api.add(postData))
            }
            if(res){
                this.$message({
                    type: 'success',
                    message: this.$t('保存成功!')
                })
                this.loadTablePage()
                this.formVisible = false
            }

            hideLoading()
        }
    },


    handleShowForm(text) {
        this.formTitle = text;
        this.formVisible = true;
    },
    handleOpenedForm(){
        if(this.formEdit){
            this.$refs.form.setForm(this.formEditRow)
        }
    },
    handleCloseForm(){
        this.$refs.form.resetForm()
    }
    
  }

}
</script>